<form class="form">
  {{#accordion-list showExpandAll=false as |al expandFn|}}

    {{#if (eq step 1) }}
      {{#accordion-list-item
         title=(t "clusterNew.azureaks.access.title")
         detail=(t "clusterNew.azureaks.access.detail")
         showExpand=false
         expandOnInit=true
         expandAll=al.expandAll
         expand=(action expandFn)
      }}
        <div class="row">
          <div class="col span-6 mb-0">
            <label class="acc-label" for="azureaks-subscription-id" >
              {{t "clusterNew.azureaks.subscriptionId.label"}}{{field-required}}
            </label>
            {{#input-or-display
               editable=isEditable
               value=config.subscriptionId
            }}
              {{input
                classNames="form-control"
                id="azureaks-subscription-id"
                placeholder=(t "clusterNew.azureaks.subscriptionId.placeholder")
                type="text"
                value=config.subscriptionId
              }}
            {{/input-or-display}}
          </div>
          <div class="col span-6 mb-0">
            <label class="acc-label" for="azureaks-tenant-id">
              {{t "clusterNew.azureaks.tenant.label"}}{{field-required}}
            </label>
            {{#input-or-display
               editable=isEditable
               value=config.tenantId
            }}
              {{input type="text"
                classNames="form-control"
                id="azureaks-tenant-id"
                placeholder=(t "clusterNew.azureaks.tenant.placeholder")
                value=config.tenantId
              }}
            {{/input-or-display}}
          </div>
        </div>

        <div class="row">
          <div class="col span-6 mb-0">
            <label class="acc-label" for="azureaks-client-id">
              {{t "clusterNew.azureaks.clientId.label"}}{{field-required}}
            </label>
            {{#input-or-display
               editable=isEditable
               value=config.clientId
            }}
              {{input
                classNames="form-control"
                id="azureaks-client-id"
                placeholder=(t "clusterNew.azureaks.clientId.placeholder")
                type="text"
                value=config.clientId
              }}
            {{/input-or-display}}
          </div>

          <div class="col span-6 mb-0">
            <label class="acc-label" for="azureaks-client-secret">
              {{t "clusterNew.azureaks.clientSecret.label"}}{{field-required}}
            </label>
            {{input
              classNames="form-control"
              id="azureaks-client-secret"
              placeholder=(t "clusterNew.azureaks.clientSecret.placeholder")
              type="password"
              value=config.clientSecret
            }}
          </div>
        </div>
        <div class="row">
          <div class="col span-6">
            <label class="acc-label" for="azureaks-location">
              {{t "clusterNew.azureaks.location.label"}}{{field-required}}
            </label>
            {{#input-or-display
               editable=isEditable
               value=config.location
            }}
              {{new-select
                classNames="form-control"
                content=zones
                id="azureaks-location"
                localizedPrompt=true
                optionLabelPath="displayName"
                optionValuePath="name"
                prompt="clusterNew.azureaks.location.prompt"
                value=config.location
              }}
            {{/input-or-display}}
          </div>
        </div>
        {{#unless editing}}
          <div class="row">
            <div class="col span-12 m-0">
              {{banner-message
                color="bg-info"
                icon="icon-help"
                class="mb-0"
                message=(t "clusterNew.azureaks.access.help" htmlSafe=true)
              }}
            </div>
          </div>
        {{/unless}}
      {{/accordion-list-item}}
      {{save-cancel
        editing=isEditing
        save=(action "authenticate")
        saveDisabled=saveDisabled
        createLabel="clusterNew.azureaks.authenticate.next"
        cancel=close
      }}
    {{/if}}

    {{#if (gte step 2) }}
      {{#accordion-list-item
         title=(t "clusterNew.kubernetesOptions.title")
         detail=(t "clusterNew.kubernetesOptions.detail")
         expandAll=al.expandAll
         expandOnInit=true
         expand=(action expandFn)
      }}
        <div class="row">
          <div class="col span-6">
            <label class="acc-label" for="azureaks-kube-version">
              {{t "clusterNew.azureaks.kubernetesVersion.label"}}
            </label>
            {{form-versions
              cluster=cluster
              editing=(eq mode "edit")
              initialVersion=config.kubernetesVersion
              value=config.kubernetesVersion
              versions=versions
              showNotAllowed=false
            }}
          </div>
          <div class="col span-6">
            <label class="acc-label" for="azureaks-master-dns-prefix">
              {{t "clusterNew.azureaks.dns.label"}}
            </label>
            {{#input-or-display
               editable=isNew
               value=config.masterDnsPrefix
            }}
              {{input
                classNames="form-control"
                id="azureaks-master-dns-prefix"
                placeholder=(t "clusterNew.azureaks.dns.placeholder")
                type="text"
                value=config.masterDnsPrefix
              }}
            {{/input-or-display}}
          </div>
        </div>

        <div class="row">
          {{#unless isChinaRegion}}
            <div class="col span-6">
              <label class="acc-label">
                {{t "clusterNew.azureaks.enableHttpApplicationRouting.label"}}
              </label>
              <div class="form-control-static">
                <label class="hand mr-20">
                  {{radio-button
                    selection=config.enableHttpApplicationRouting
                    value=true
                  }}
                  {{t "generic.enabled"}}
                </label>
                <label class="hand">
                  {{radio-button
                    selection=config.enableHttpApplicationRouting
                    value=false
                  }}
                  {{t "generic.disabled"}}
                </label>
              </div>
            </div>
          {{/unless}}
          <div class="col span-6">
            <label class="acc-label">
              {{t "clusterNew.azureaks.enableMonitoring.label"}}
            </label>
            <div class="form-control-static">
              <label class="hand mr-20">
                {{radio-button
                  selection=config.enableMonitoring
                  value=true
                }}
                {{t "generic.enabled"}}
              </label>
              <label class="hand">
                {{radio-button
                  selection=config.enableMonitoring
                  value=false
                }}
                {{t "generic.disabled"}}
              </label>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col span-12 mb-0">
            <label class="acc-label">
              {{t "clusterNew.azureaks.tags.label"}}
            </label>
            {{form-key-value
              initialMap=tags
              changed=(action "setTags")
              addActionLabel="clusterNew.azureaks.tags.addActionLabel"
            }}
          </div>
        </div>

      {{/accordion-list-item}}

      {{#accordion-list-item
         title=(t "clusterNew.nodes.title")
         detail=(t "clusterNew.nodes.detail")
         showExpand=false
         expandOnInit=true
         expandAll=al.expandAll
         expand=(action expandFn)
      }}
        <div class="row">
          <div class="row">
            <div class="col span-6">
              <label class="acc-label" for="azureaks-admin-username-prefix">
                {{t "clusterNew.azureaks.admin.label"}}
              </label>
              {{#input-or-display
                 editable=isNew
                 value=config.adminUsername
              }}
                {{input
                  classNames="form-control"
                  id="azureaks-admin-username-prefix"
                  placeholder=(t "clusterNew.azureaks.admin.placeholder")
                  type="text"
                  value=config.adminUsername
                }}
              {{/input-or-display}}
            </div>
            <div class="col span-6">
              <label class="acc-label" for="azureaks-resource-group">
                {{t "clusterNew.azureaks.resourceGroup.label"}}{{field-required}}
                {{#tooltip-element
                   type="tooltip-basic"
                   model=(t "clusterNew.azureaks.resourceGroup.helpText")
                   tooltipTemplate="tooltip-static"
                   aria-describedby="tooltip-base"
                   tooltipFor="tooltipResourceGroup"
                   placement="top"
                }}
                  <i class="icon icon-info"></i>
                {{/tooltip-element}}
              </label>
              {{#input-or-display
                 editable=isNew
                 value=config.resourceGroup
              }}
                {{input
                  classNames="form-control"
                  id="azureaks-resource-group"
                  placeholder=(t "clusterNew.azureaks.resourceGroup.placeholder")
                  type="text"
                  value=config.resourceGroup
                }}
              {{/input-or-display}}
            </div>
          </div>

          <div class="row">
            <div class="col span-6">
              <label class="acc-label" for="azureaks-config-count">
                {{t "clusterNew.azureaks.count.label"}}
              </label>
              {{input-number
                id="azureaks-config-count"
                min=1
                value=config.count
                placeholder=(t "clusterNew.azureaks.count.placeholder")
              }}
            </div>
            <div class="col span-6">
              <label class="acc-label" for="azureaks-os-disk-size">
                {{t "clusterNew.azureaks.diskSizeGb.label"}}
              </label>
              {{#input-or-display
                 editable=isNew
                 value=config.agentOsdiskSize
              }}
                <div class="input-group">
                  {{input-number
                    id="azureaks-os-disk-size"
                    min=0
                    value=config.agentOsdiskSize
                    placeholder=(t "clusterNew.azureaks.diskSizeGb.placeholder")
                  }}
                  <span class="input-group-addon bg-default">{{t "generic.gigabyte"}}</span>
                </div>
              {{/input-or-display}}
            </div>
          </div>

          <div class="col span-6">
            <label class="acc-label" for="azureaks-vm-disk-size">
              {{t "clusterNew.azureaks.machineType.label"}}
            </label>
            {{#input-or-display
               editable=isNew
               value=config.agentVmSize
            }}
              {{new-select
                id="azureaks-vm-disk-size"
                classNames="form-control"
                optionValuePath="value"
                optionLabelPath="value"
                content=machineSizes
                value=config.agentVmSize
                prompt="clusterNew.azureaks.machineType.prompt"
                localizedPrompt=true
              }}
            {{/input-or-display}}
          </div>
        </div>
        <div class="row">
          <div class="col span-12">
            <label class="acc-label" for="azureaks-netwok-mode">
              {{t "clusterNew.azureaks.networking.label"}}
            </label>
            {{#input-or-display
               editable=isNew
               value=(if (eq netMode "default") (t "clusterNew.azureaks.networking.default") (t "clusterNew.azureaks.networking.advanced"))
            }}
              <div class="radio">
                <label class={{concat (if editing "text-muted") " hand mr-20"}}>
                  {{radio-button
                    selection=netMode
                    value="default"
                    disabled=editing
                  }}
                  {{t "clusterNew.azureaks.networking.default"}}
                </label>
                <label class={{concat (if editing "text-muted") " hand"}}>
                  {{radio-button
                    selection=netMode
                    value="advanced"
                    disabled=editing
                  }}
                  {{t "clusterNew.azureaks.networking.advanced"}}
                </label>
              </div>
            {{/input-or-display}}
          </div>
          {{#if (eq netMode "advanced")}}
            <div class="row">
              <div class="col span-6 mt-0">
                <label class="acc-label" for="azureaks-advanced-network-plugin">
                  {{t "clusterNew.azureaks.networking.networkPlugin.label"}}
                </label>
                {{#input-or-display
                   editable=isNew
                   value=config.networkPlugin
                }}
                  {{new-select
                    classNames="form-control"
                    content=networkPlugins
                    id="azureaks-advanced-network-plugin"
                    localizedPrompt=false
                    prompt=(t "clusterNew.azureaks.networking.networkPlugin.prompt")
                    value=config.networkPlugin
                  }}
                {{/input-or-display}}
              </div>
              <div class="col span-6 mt-0">
                <label class="acc-label" for="azureaks-advanced-virtual-network">
                  {{t "clusterNew.azureaks.networking.vnet.label"}}
                </label>
                {{#input-or-display
                   editable=isNew
                   value=networkChoiceDisplay
                }}
                  {{new-select
                    classNames="form-control"
                    content=filteredVirtualNetworks
                    id="azureaks-advanced-virtual-network"
                    localizedPrompt=false
                    optionLabelPath="name"
                    optionValuePath="value"
                    optionGroupPath="group"
                    prompt=(t "clusterNew.azureaks.networking.vnet.prompt")
                    value=networkChoice
                  }}
                {{/input-or-display}}
              </div>
            </div>
            <div class="row">
              <div class="col span-6 mt-0">
                <label class="acc-label" for="azureaks-service-cidr-id">
                  {{t "clusterNew.azureaks.networking.serviceCidr.label"}}
                </label>
                {{#input-or-display
                   editable=isNew
                   value=config.serviceCidr
                }}
                  {{input
                    classNames="form-control"
                    id="azureaks-service-cidr-id"
                    placeholder=(t "clusterNew.azureaks.networking.serviceCidr.prompt")
                    type="text"
                    value=config.serviceCidr
                  }}
                {{/input-or-display}}
                <p class="help-block">
                  {{t "clusterNew.azureaks.networking.serviceCidr.help"}}
                </p>
              </div>
              <div class="col span-6 mt-0">
                <label class="acc-label" for="azureaks-pod-cidr">
                  {{t "clusterNew.azureaks.networking.podCidr.label"}}
                </label>
                {{#input-or-display
                   editable=isNew
                   value=config.podCidr
                }}
                  {{input
                    classNames="form-control"
                    id="azureaks-pod-cidr"
                    type="text"
                    value=config.podCidr
                    placeholder=(t "clusterNew.azureaks.networking.podCidr.placeholder")
                  }}
                {{/input-or-display}}
                <p class="help-block">
                  {{t "clusterNew.azureaks.networking.podCidr.help"}}
                </p>
              </div>
            </div>
            <div class="row">
              <div class="col span-6 mt-0">
                <label class="acc-label" for="azureaks-dns-service-ip">
                  {{t "clusterNew.azureaks.networking.dnsServiceIp.label"}}
                </label>
                {{#input-or-display
                   editable=isNew
                   value=config.dnsServiceIp
                }}
                  {{input
                    classNames="form-control"
                    id="azureaks-dns-service-ip"
                    type="text"
                    value=config.dnsServiceIp
                    placeholder=(t "clusterNew.azureaks.networking.dnsServiceIp.placeholder")
                  }}
                {{/input-or-display}}
                <p class="help-block">
                  {{t "clusterNew.azureaks.networking.dnsServiceIp.help"}}
                </p>
              </div>
            </div>
            <div class="row">
              <div class="col span-6 mt-0">
                <label class="acc-label" for="azureaks-docker-service-ip">
                  {{t "clusterNew.azureaks.networking.dockerBridgeCidr.label"}}
                </label>
                {{#input-or-display
                   editable=isNew
                   value=config.dockerBridgeCidr
                }}
                  {{input
                    classNames="form-control"
                    id="azureaks-docker-service-ip"
                    type="text"
                    value=config.dockerBridgeCidr
                    placeholder=(t "clusterNew.azureaks.networking.dockerBridgeCidr.placeholder")
                  }}
                {{/input-or-display}}
                <p class="help-block">
                  {{t "clusterNew.azureaks.networking.dockerBridgeCidr.help"}}
                </p>
              </div>
              <div class="col span-6 mt-0">
                <label class="acc-label">
                  {{t "clusterNew.azureaks.networkPolicy.label"}}
                </label>
                {{#input-or-display
                   editable=isNew
                   value=config.networkPolicy
                }}
                  {{searchable-select
                    class="form-control"
                    content=networkPolicyContent
                    value=config.networkPolicy
                    placeholder=(t "clusterNew.azureaks.networkPolicy.placeholder")
                  }}
                {{/input-or-display}}
              </div>
            </div>
          {{/if}}
        </div>
        <div class="row">
          <div class="col span-12">
            <label class="acc-label" for="azureaks-advanced-ssh-pub-key">
              {{t "clusterNew.azureaks.ssh.label"}}{{field-required}}
            </label>
            {{#input-or-display
               editable=isEditable
               value=config.sshPublicKeyContents
            }}
              {{input-text-file
                id="azureaks-advanced-ssh-pub-key"
                classNames="box"
                value=config.sshPublicKeyContents
                multiple=true
                canChangeName=false
                accept="application/x-x509-ca-cert,text/plain,.pem,.crt,.pub"
                minHeight=60
                placeholder="clusterNew.azureaks.ssh.placeholder"
                shouldChangeName=false
              }}
            {{/input-or-display}}
          </div>
        </div>
      {{/accordion-list-item}}

      {{save-cancel
        editing=(eq mode "edit")
        save=(action "driverSave")
        cancel=close
      }}
    {{/if}}



  {{/accordion-list}}

  {{top-errors errors=errors}}
  {{top-errors errors=otherErrors}}
  {{top-errors errors=clusterErrors}}
</form>
